<template>
  <div class="register">
<h1>
  <i @click="fun()" class="iconfont icon-zuojiantou"></i>
  <span>注册</span>
</h1>
<h2>
  <i class="iconfont icon-shouji"></i>
  <input type="text" placeholder="请输入手机号">
  <span>中国</span>
  <i class="iconfont icon-xiajiantou"></i>
</h2>
<h3>
  <i class="iconfont icon-yanzhengma"></i>
  <input type="text" placeholder="请输入验证码">
  <i>获取验证码</i>
</h3>
<h4>
  <i class="iconfont icon-mima"></i>
  <input type="text" placeholder="请输入密码（不小于6位）">
</h4>
<h5>
  <button>注册</button>
</h5>
<h6>
  <input type="radio">
  <span>请仔细阅读并同意</span>
  <span>《用户协议》《隐私政策》</span>
</h6>
  </div>
</template>

<script>
export default {
methods:{
  fun(){
    this.$router.go(-1)
  }
}
}
</script>

<style scoped>
.icon-zuojiantou{
  font-size: .24rem;
}
.icon-yanzhengma{
  color: #000;
}
h6{
  padding: 0 .4rem;
  font-size: .12rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
h6 span:nth-child(2){
  padding-left: .08rem;
  color: #999;
}
h5{
  width: 100%;
  height: .9rem;
  line-height: 1.1rem;
  text-align: center;
}
button{
  font-size: .2rem;
  width: 3rem;
  height: .45rem;
  line-height: .45rem;
  border-radius: .45rem;
  background-color: rgb(48, 47, 47);
  color: #fff;
}
h1{
  height: .5rem;
  line-height: .5rem;
  font-size: .24rem;
  font-weight: 700;
  margin-bottom: .5rem;
}
h1 i{
  margin: 0 1.15rem 0 .2rem;
}
h2,h3,h4{
  margin: 0 auto;
  width: 3rem;
  height: .5rem;
  border: .01rem solid #999;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
h2 i{
  padding:0 .1rem;
}
h2 input{
  width: 1.8rem;
  height: .5rem;
  font-size: .18rem;
}
h3,h4{
  border-top:none ;
}
h3 i{
  color: green;
  padding:0 .1rem;
}
h3 input{
  width: 1.6rem;
  height: .5rem;
  font-size: .18rem;
}
h4{
  justify-content: flex-start;
  margin-bottom: .2rem;
}
h4 i{
  padding:0 .13rem;
}
h4 input{
  height: .5rem;
  font-size: .18rem;
}
</style>